---
id: 613e275749ebd008e74bb62e
title: الخطوة 8
challengeType: 0
dashedName: step-8
---

# --description--

تعني الخاصية _SVG_ المفيدة (رُسُوم متجهة قابلة للتطوير scalable vector graphics)، هي أنها تحتوي على سمة `path` التي تسمح بتغيير حجم الصورة دون التأثير على دقة الصورة الناتجة من التغيير.

حاليًا، تأخذ `img` حجمها الافتراضي, وهو كبير جدًا. CSS has a `max` function which returns the largest of a set of comma-separated values. على سبيل المثال:

```css
img {
  width: max(250px, 25vw);
}
```

In the above example, the width of the image will be 250px if the viewport width is less than 1000 pixels. If the viewport width is greater than 1000 pixels, the width of the image will be 25vw. This is because 25vw is equal to 25% of the viewport width.

Scale the image using its `id` as a selector, and setting the `width` to be the maximum of `100px` or `18vw`.

# --hints--

You should use the `#logo` selector to target the `img` element.

```js
assert.exists(new __helpers.CSSHelp(document).getStyle('#logo'));
```

You should give the `img` a `width` of `max(100px, 18vw)`.

```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav></nav>
    </header>
    <main></main>
  </body>
</html>

```

```css
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

--fcc-editable-region--

--fcc-editable-region--

```
